<template>
<div>
  <div class="gojiesuan">

    <div class="shouhuoren" @click="address">
      <!-- <div></div> -->
      <div class="tianxie" v-show="!isaddress">请填写收货人信息</div>

      <div class="site-l" v-show="isaddress">
        <p class="p1"> <span v-show="ismoren" style="margin-right:10px;">默认</span>{{get_consignee.address_detail}}</p>
        <p class="p2">{{get_consignee.consignee}}    {{get_consignee.mobile}}</p>
      </div>

      <img class="jiantou" src="../../assets/img/ckgd.png" alt="">
    </div>


    <img class="caitiao" src="../../assets/img/caitiao.png" alt="">
    <div class="gray"></div>
    <div class="fangshi">
      <div class="shi">
        <div class="shi1">支付方式</div>
        <div  class="shi2">
          <div>货到付款</div>
          <p class="jiantou"></p>
        </div>
      </div>
      <div class="shi">
        <div class="shi1">配送方式</div>
        <div  class="shi2" >
          <div>{{fangshi}}</div>
           <p class="jiantou"></p>
          <!-- <img class="jiantou" src="../../assets/img/ckgd.png" alt=""> -->
        </div>
      </div>
    </div>
    <div class="pei" v-if="pei == 1">

      <div class="itemmendian" v-for='(item,index) in allmendian' :key='index'>
        <div class="chackedbox">
          <img @click="selectmendian(index)" v-if="item.isselect==true" src="../../assets/img/duigou.png" alt />
          <div @click="selectmendian(index)" v-if="item.isselect==false" class="noselecrbox"></div>
        </div>
        <div style="font-size: 15px;color: #333;">{{item.stores_name}}</div>
      </div>
   
    </div>
    <div class="grays"></div>
    <div class="yao">
      <p class="tit">天健大药房</p>
      <div class="yaopin">
        <img :src="goods_data.goods_img" alt="">
        <div class="yaodetails">
          <p class="yaop1">{{goods_data.goods_name}}</p>
          <p class="yaop2">{{goods_data.goods_attr}}</p>
          <div class="yaoqianshu">
            <p class="yaoqian">{{goods_data.exchange_integral}}分</p>
            <p class="yaoshu">x{{goods_data.goods_number}}</p>
          </div>
        </div>
      </div>
    </div>  
    <div class="gray"></div>
 
    <div class="gray"></div>
    <div class="beizhu">
      <textarea placeholder="选填，可填写您和商家达成一致的要求~" maxlength="200" v-model="beizhuvalue"></textarea>
      <p>备注</p>
    </div>
    <div class="gray"></div>
    <div class="jine">
      <div class="jine-item">
        <p class="jine-p1">所需积分</p>
        <p class="jine-p2">{{goods_data.exchange_integral}}分</p>
      </div>
    
      
      <div class="jine-item" >
        <p class="jine-p1">合计</p>
        <p class="redqian jine-p2">{{goods_data.exchange_integral}}分</p>
      </div>
    </div>
    <div class="gray"></div>
    <!-- <div class="wudizhi">
      您还没有填写收货地址哦~
    </div> -->
    <div class="yinying" v-if="peishow"></div>
    <div class="hezi" v-if="peishow">
      <label @click="selectsex(1,$event)">
        <Radio class="radio" ref="radio1" v-bind:chacked="pei==1?true:false" ></Radio>
        到店自取
      </label> 
      <!-- <label @click="selectsex(2,$event)">
        <Radio class="radio" ref="radio2" v-bind:chacked="pei==2?true:false" ></Radio>
        药房配送
      </label>  -->
    </div>

  </div>
  <div class="posijiesuan">
   
     <div class="left" > 
      共计： <span class="s1"></span> <span class="s2">{{details.exchange_integral}}分</span> 
    </div>
    <div class="but" @click="xiadan">
      去结算
    </div>
  </div>

  


</div>





</template>





<script>
import Radio from "../radio";
  export default {
    data() {
      return {
        peishow:false,
        pei:1,
        fangshi:'到店自取',
        // yaofang:[
        //   {name:'1号店',id:'1'},
        //   {name:'2号店',id:'2'},
        // ],
        yao:1,
        good_id:'',
        details:'',
        isaddress:false,
        ismoren:false,
        get_consignee:"",
        allmendian:'',
        beizhuvalue:'',
        user_bonus:"",
        selectcouponindex:'',
        couponboxshow:false,
        showcouponitem:false,
        store_id:"",
        goods_data:''
      }
    },
    components: {
      Radio,
    },
    mounted () {

    },
    destroyed () {

    },
    methods: {
      selectmendian(index){
        if(this.allmendian[index].isselect==true){
          return
        }else{
          for (const key in this.allmendian) {
            this.allmendian[key].isselect=false
          }
          this.allmendian[index].isselect=true
         
          this.store_id= this.allmendian[index].stores_id
           this.$forceUpdate()
        }

        // for (const key in this.allmendian) {
        //   if (this.allmendian[key].isselect==true) {
        //     this.store_id= this.allmendian[key].store_id
        //   }
        // }
      },
      peisong(){
        this.peishow = true
      },
      selectsex(index,e){
        this.pei=index
        for (const key in this.$refs) {
          this.$refs[key].getchange()
          if(this.pei == 1){
            this.fangshi='到店自取'
            this.peishow=false;
          }else if(this.pei == 2){
            this.fangshi='药房配送'
            this.peishow=false;
          }
        }
      },
      selectyao(index,e){
        this.yao=index
        for (const key in this.$refs) {
          this.$refs[key].getchange()
        }
      },
      // 跳转地址页面
      address(){
        this.$router.replace({path:'/selectaddress',query:{good_id:this.good_id}})
      },

      getdetails(){
        this.$get("api/gzh_order.php?action=exchange_order_show", {
            uid:localStorage.getItem('uid'),
            goods_id: this.good_id[0]
        }).then(res => { 
            console.log(res.data,'res')
            if(res.error==0){
              this.details=res.data
                if(localStorage.getItem("selectitem")){
                  console.log(this.$qs.parse(localStorage.getItem("selectitem")),'sssssssssssssssssssss')
                  var selectitem=this.$qs.parse(localStorage.getItem("selectitem"))

                  this.details.get_consignee.address_detail=selectitem.address
                  this.details.get_consignee.address_id=selectitem.address_id
                  this.details.get_consignee.city=selectitem.city
                  this.details.get_consignee.consignee=selectitem.consignee

                  this.details.get_consignee.country=selectitem.country
                  this.details.get_consignee.mobile=selectitem.mobile

                  this.details.get_consignee.province=selectitem.province
                  this.details.get_consignee.user_id=selectitem.user_id

       
                }
                if(this.details.get_consignee==false){
                  this.isaddress=false
                 
                }else{
                  this.isaddress=true
                  if(this.details.get_consignee.user_id>0){
                    this.ismoren=true
                    // console.log(this.ismoren,'moren')
                    // this.$forceUpdate()
                  }else{
                    // console.log(this.details.get_consignee.user_id)
                    // console.log(this.ismoren,'moren')
                    this.ismoren=false
                  }
                }
                this.get_consignee=this.details.get_consignee
                this.goods_data=this.details.goods_data
                
                this.getmendian()

            }else{
              console.log(res.msg)
              console.log(this)
              this.$toast(res.msg);
              this.$router.go(-1)
            }
        }).catch(err => {
            
        });
      },


     

      getmendian(){
        var uid=localStorage.getItem('uid')
        this.$get(
            // method: "get",
            "api/gzh_order.php?action=order_stores",
            {
              uid:uid,
              address_id:this.get_consignee.address_id
            },
        ).then(response => {
            console.log(response)
            // if(response.error==0){
            //   this.allmendian=
            // }
            // this.$dialog.confirm({
            //   message: '当前地址暂无门店'
            // }).then(() => {
            //   this.deicarfun(index,'')
            //   // instance.close();
            // });
            if(response.data.length==0){
              this.$toast('当前地址暂无门店,请选择其他地址')
            }else{
              this.allmendian=response.data
              for (const key in this.allmendian) {
               this.allmendian[key].isselect=false

              }
              // this.allmendian[0].isselect=true
            }
        })
      },

      xiadan(){
        
        if(!this.isaddress){
           this.$toast('请选择地址');
           return
        }
        if(this.store_id==''){
           this.$toast('请选择门店');
           return
        }
    
        this.$axios({
            method: "post",
            url: "/api/gzh_order.php",
            data:this.$qs.stringify({
              uid:localStorage.getItem('uid'),
              action:'exchange_order',
              goods_id: this.good_id[0],
              address_id:this.get_consignee.address_id,
              store_id:this.store_id,
             
            }),
            headers: {
                // 'Content-Type': 'application/x-www-form-urlencoded'
                // 'content-Type' : 'application/json'
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
          
            console.log(response)

            if(response.data.error==0){
              this.$router.replace({path:'/submit',query:{'order_sn':response.data.data.order_sn,'order_id':response.data.data.order_id}})

              localStorage.removeItem('selectitem');
              localStorage.removeItem('good_id');

            }
            if(response.data.error=='1'){
              // console.log('sssssss')
              this.$toast(response.data.msg);
              // this.$router.push({name:'free-trial'})
            }
        })
      },
    },
      

    created () {
     

      console.log(this.$qs.parse(localStorage.getItem("selectitem")),'sssssssssssssssssssss')

      if(localStorage.getItem("good_id")){
        this.good_id=localStorage.getItem("good_id").split(",")
        
      }else{
        this.good_id=this.$route.query.good_id
        if(Object.prototype.toString.call(this.good_id)!='[object Array]'){
          this.good_id=this.good_id.split(',')
        }
        // console.log(this.good_id,111111111111111111111111)
        
        localStorage.setItem("good_id",this.good_id)
      }
      
      this.getdetails()
      console.log('fanhuilai')
    },
    destroyed () {
      localStorage.removeItem('selectitem');
      localStorage.removeItem('good_id');
      localStorage.removeItem('cart_id');
    },
  }
</script>

<style scoped>
.couponbox{
  width:100vw;
  height:100vh;
  background-color: rgb(0, 0, 0,0.4);
  position: fixed;
  top:0;
  left:0;
}
.couponbox-itembox{
  width:100%;
  height:40vh;
  position: absolute;
  bottom: 0;
  left:0;
  background-color: #fff;
}
.header{
  width:100%;
  height:6vh;
  border-bottom: 1PX solid rgb(223, 220, 220);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}
.body-item{
  width:100%;
  height:34vh;
  overflow: hidden;
  overflow-y: scroll;
}

.itemmendian{
  height:80px;
  display: flex;
  align-items: center;
}

.item{
  width: 704px;
  height: 181px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}
.item .bg{
  width: 704px;
  height: 181px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.item img{
  width: 704px;
  height: 181px;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 704px;
  height: 181px;
}
.box-l{
  width: 220px;
  height: 181px;
  padding-top: 35px;
  padding-left: 30px;
  box-sizing: border-box;
}
.box-l .p1{
  font-size: 50px;
  color: #fff;
}
.box-l .p1 span{
  font-size: 26px;
  margin-right: 20px;
}
.box-l .p2{
  font-size: 26px;
  color: #fff;
  margin-top: 10px;
}
.box-r{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 484px;
  height: 181px;
}
.r-l{
  margin-left: 30px;
}
.r-l .p3{
  font-size: 30px;
  color: #333;
}
.r-l .p4{
  font-size: 24px;
  color: #9e9e9e;
  margin-top: 38px;
}
.r-r{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #06a255;
  font-size: 24px;
  color: #06a255;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}
.lose{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #ccc;
  font-size: 24px;
  color: #ccc;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}

.chackedbox {
  /* width: 200px; */
  display: flex;
  align-items: center;
}
.chackedbox img {
  width: 28px;
  height: 28px;
  margin-right: 16px;
}
.chackedbox .zi {
  font-size: 28px;
  color: #666;
  /* margin: 0 16px; */
}
.noselecrbox {
  width: 28px;
  height: 28px;
  border: 1PX solid #666;
  border-radius: 50%;
  margin-right: 16px;
  box-sizing: border-box;
}


.site-l .p1{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
}
.site-l .p1 span{
  display: inline-block;
  width: 60px;
  height: 30px;
  font-size: 26px;
  background: red;
  color: #fff;
  font-family:PingFang SC;
  font-weight:500;
  border-radius: 10px;
  text-align: center;
  line-height: 30px;
}
.site-l .p2{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(102,102,102,1);
  line-height:30px;
  margin-top: 31px;
}
.gojiesuan{
  width: 100%;
  margin-bottom: 98px;
}
.shouhuoren{
  width: 100%;
  height: 150px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shouhuoren .tianxie{
  font-size: 28px;
  color: #333;
  font-weight: bold;
}
.jiantou{
  width: 15px;
  height: 22px;
}
.caitiao{
  width: 100%;
  height: 8px;
  display: block;
}
.gray{
  width: 100%;
  height: 15px;
  background: #F6F6F6;
}

/* 支付方式   配送方式 */
.fangshi{
  width: 100%;
  height: 144px;
  padding: 0 30px;
  box-sizing: border-box;
}
.shi{
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shi .shi1{
  font-size: 30px;
  color: #333;
}
.shi .shi2{
  font-size: 28px;
  color: #333;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.shi .shi2 div{
  margin-right: 20px;
}

/* 配送 */
.pei{
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.pei label{
  font-size: 30px;
  color: #333;
  margin-right: 96px;
  display: flex;
  align-items: center;
  height: 80px;
  width: 100%;
  border-bottom: 1PX solid #f7f7f7;
}
.pei label .radio{
  display: inline-block;
  margin-right: 22px;
}





.grays{
  width: 100%;
  background: #F6F6F6;
  height: 10px;
}

/* 药品信息 */
.yao{
  width: 100%;
  /* height: 282px; */
  padding: 0 30px;
  box-sizing: border-box;
}
.yao .tit{
  font-size: 28px;
  color: #0b0a0a;
  line-height: 80px;
  width: 100%;
  height: 80px;
  font-weight: bold;
}
.yaopin{
  display: flex;
  align-items: center;
  width: 100%;
  height: 182px;
}
.yaopin img{
  width: 135px;
  height: 135px;
  margin-right: 28px;
  border: 1PX solid #f7f7f7;
}
.yaodetails{
  width: 500px;
}
.yaodetails .yaop1{
  font-size: 32px;
  color: #333;
  font-weight: bold;
}
.yaodetails .yaop2{
  font-size: 24px;
  color: #666;
  margin-top: 5px;
}
.yaoqianshu{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
.yaoqianshu .yaoqian{
  font-size: 28px;
  color: #c94451;

}
.yaoqianshu .yaoshu{
  font-size: 28px;
  color: #333;
}

/* 优惠券列表 */
.juan{
  width: 100%;
  /* height: 204px; */
  padding: 0 30px;
  box-sizing: border-box;
}
.juan-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 68px;
}
.juan-item .juan-item-l{
  font-size: 30px;
  color: #333;
}
.juan-item .juan-item-r{
  font-size: 28px;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.juan-item .juan-item-r div{
  margin-right: 20px;
}


/* 备注 */
.beizhu{
  width: 100%;
  height: 144px;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
}
.beizhu textarea{
  width: 100%;
  height: 144px;
  border: none;
  outline: none;
  padding: 20px 0;
  box-sizing: border-box;
  text-indent: 3em;
  font-size: 30px;
}
.beizhu p{
  position: absolute;
  left: 30px;
  top: 20px;
  font-size: 30px;
   /* font-size: 26px; */
  color: #333;
}

/* 金额 */
.jine{
  width: 100%;
  /* height: 255px; */
  padding: 0 30px; 
  box-sizing: border-box;
}
.jine .jine-item{
  width: 100%;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jine-item .jine-p1{
  font-size: 30px;
  color: #333;
  
}
.jine-item .jine-p2{
  font-size: 30px;
  color: #333;
  font-weight: bold;
}
.jine-item .redqian{
  color: #c94451;
}
.wudizhi{
  width: 100%;
  height: 51px;
  padding:  0 30px;
  box-sizing: border-box;
  background: #FCFBE7;
  font-size: 26px;
  color: #c4795e;
  line-height: 51px;
}


/* 定位结算 */
.posijiesuan{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left{
  width: 70%;
  padding-left: 30px;
  box-sizing: border-box;
  font-size:28px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(11,10,10,1);
  line-height:98px;
}
.left .s1{
  color: #D51A1A
}
.left .s2{
  color: #D51A1A;
  font-size: 34px;
}
.but{
  width:30%;
  height:98px;
  background:rgba(6,162,85,1);
  font-size:28px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height:98px;
  text-align: center;
}





.yinying{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  opacity: .5;
  z-index: 1;
}
.hezi{
  width: 100%;
  height: 160px;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1PX solid #f7f7f7;
  padding: 0 30px;
  box-sizing: border-box;
}
.hezi label{
  font-size: 30px;
  color: #333;
  margin-right: 96px;
  display: flex;
  align-items: center;
  height: 80px;
  width: 100%;
  border-bottom: 1PX solid #f7f7f7;
}
.hezi label .radio{
  display: inline-block;
  margin-right: 22px;
}
</style>
<style >
.van-toast{
width:  80vw;
height: 100px ;
font-size: 28px;
}
.van-toast--html, .van-toast--text{
width: 80vw ;
height: 100px ;
font-size: 28px;
}
</style>